<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width">
	<title>通讯录</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
	<div class="header">
		<h1>通讯录</h1>
		<i></i>
	</div>
	
	<div class="content">
		<div class="subheader">
			<input type="text" name="">
			<div class="search">
				<div class="sousuo">
					搜索
				</div>
			</div>
			<div class="mico"></div>
		</div>
		<ul class="new">
			<li class="newFriend">
				<div class="pic"></div>
				<div class="zi">
					<span>新的朋友</span>
				</div>
			</li>
			<li class="qunliao">
				<div class="pic"></div>
				<div class="zi">
					<span>群聊</span>
				</div>
			</li>
			<li class="tag">
				<div class="pic"></div>
				<div class="zi">
					<span>标签</span>
				</div>
			</li>
			<li class="gongzhonghao">
				<div class="pic"></div>
				<div class="zi">
					<span>公众号</span>
				</div>
			</li>
		</ul>


		<ul class="contact">
			<li class="type">
				<div class="zimu">A</div>
				<ul class="person">
					<li class="demo1">
						<div class="pic"></div>
						<div class="zi">
							<span>A健身教练-张阳</span>
						</div>
					</li>
					<li class="demo2">
						<div class="pic"></div>
						<div class="zi">
							<span>A韬慈</span>
						</div>
					</li>
					<li class="demo3">
						<div class="pic"></div>
						<div class="zi">
							<span>A郑义梦</span>
						</div>
					</li>
				</ul>
			</li>

			<li class="type">
				<div class="zimu">B</div>
				<ul class="person">
					<li class="demo1">
						<div class="pic"></div>
						<div class="zi">
							<span>B朱志亮</span>
						</div>
					</li>
					<li class="demo2">
						<div class="pic"></div>
						<div class="zi">
							<span>B李晓华</span>
						</div>
					</li>
					<li class="demo3">
						<div class="pic"></div>
						<div class="zi">
							<span>B张萌</span>
						</div>
					</li>
					<li class="demo3">
						<div class="pic"></div>
						<div class="zi">
							<span>B仙女</span>
						</div>
					</li>
				</ul>
			</li>
		</ul>

	</div>


	<ul class="cebian">
		<li class="fangda"></li>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
		<li>F</li>
		<li>G</li>
		<li>H</li>
		<!-- <li>I</li> -->
		<li>J</li>
		<li>K</li>
		<li>L</li>
		<li>M</li>
		<li>N</li>
		<li>O</li>
		<!-- <li>P</li> -->
		<li>Q</li>
		<li>R</li>
		<li>S</li>
		<li>T</li>
		<!-- <li>U</li> -->
		<!-- <li>V</li> -->
		<li>W</li>
		<li>X</li>
		<li>Y</li>
		<li>Z</li>
		<li>#</li>
	</ul>



	<div class="nav">
		<ul class="nav-inner">
			<li class="nav1">
				<a href="index.html">
					<div class="img"></div>
					<div class="word">
						微信
					</div>
				</a>
			</li>
			
			<li class="nav2">
				<a href="contact.html">
					<div class="img"></div>
					<div class="word">
						通讯录
					</div>
				</a>
			</li>
			<li class="nav3">
				<a href="find.html">
					<div class="img"></div>
					<div class="word">
						发现
					</div>
				</a>
			</li>

			<li class="nav4">
				<a href="me.html">
					<div class="img"></div>
					<div class="word">
						我
					</div>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>